import React,{Component} from 'react'
import {ViewPropTypes, Text, StatusBar, StyleSheet, View, Platform,DeviceInfo} from 'react-native'
import {PropTypes} from 'prop-types';
import {WingBlank} from 'antd-mobile-rn';
import Button from '$/components/Button'

const NAV_BAR_HEIGHT_IOS = 64;//导航栏在iOS中的高度
const NAV_BAR_HEIGHT_ANDROID = 70;//导航栏在Android中的高度
const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated ? 10 : 0;//状态栏的高度
const StatusBarShape = {//设置状态栏所接受的属性
    barStyle: PropTypes.oneOf(['light-content', 'dark-content' ,'default',]),
    hidden: PropTypes.bool,
    backgroundColor: PropTypes.string,
};
export default class Header extends Component {
    //提供属性的类型检查
    static propTypes = {
        style: ViewPropTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        titleLayoutStyle: ViewPropTypes.style,
        hide: PropTypes.bool,
        statusBar: PropTypes.shape(StatusBarShape),
        rightButton: PropTypes.element,
        leftButton: PropTypes.element,
    };
    //设置默认属性
    statusBar = {
        barStyle: 'light-content',
        hidden: false,
        translucent: true,
        backgroundColor:'transparent'
    };

    render() {
        let defaultProps = {...this.statusBar, ...this.props.statusBar||{}};
        let statusBar =
            <View style={styles.statusBar}>
                <StatusBar {...defaultProps} />
            </View> ;

        let titleView = this.props.titleView ? this.props.titleView :
            <Text ellipsizeMode="head" numberOfLines={1} style={[styles.title, this.props.titleStyle]}>{this.props.title}</Text>;

        let content = this.props.hide ? null :
            <View style={styles.navBar}>
                {this.getButtonElement(this.props.leftButton)}
                <View style={[styles.navBarTitleContainer, this.props.titleLayoutStyle]}>
                    {titleView}
                </View>
                {this.getButtonElement(this.props.rightButton)}
            </View>;
        return (
            <View style={[styles.container, this.props.style]}>
                {statusBar}
                {content}
            </View>
        )
    }

    getButtonElement(data) {
        return (
            <View style={styles.navBarButton}>
                {data ? data : null}
            </View>
        )

    }
}



export const SmallHead =  props => {
    return (
        <WingBlank>
            <Text style={[{color: '#666', fontSize: 12}, props.style]}>{props.children}</Text>
        </WingBlank>
    )
}


export const BigHead = props => {
    return (
        <WingBlank style={{flexDirection: 'row', justContent: 'space-between'}}>
            <Text style={[{color: '#333',fontSize: 18, flex: 1}, props.style]}>{props.children}</Text>
            <Button opacity={0.6} style={styles.submit} onPress={props.onPress}>
                {props.right}
            </Button>
        </WingBlank>
    )
}


const styles = StyleSheet.create({
    submit:{
        minWidth: 50,
        paddingRight: 7,
        paddingLeft: 7,
        height: 26,
        borderRadius: 520,
        backgroundColor: 'transparent',
        justifyContent:'center',
        alignItems:'center',
        borderColor: '#666',
        borderWidth: 1
    },
    container: {
        backgroundColor: '#2196f3'
    },
    navBarButton: {
        alignItems: 'center',
        bottom: -12
    },
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
    },
    navBarTitleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 40,
        right: 40,
        bottom: 10,

    },
    title: {
        fontSize: 18,
        color: '#fff',
        fontWeight: 'bold'
    },
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
    }
});
